<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>158-事件-基本拖拽.html</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		#box{
			width: 100px;
			height: 100px;
			background-color:skyblue;
			position: absolute;
			left: 0;
			top: 0;
		}
	</style>
</head>
<body>
	<div id="box">
	</div>
</body>
<script>
	var oBox = document.getElementById('box');
	var disX = 0,disY = 0;
	oBox.onmousedown = function(ev){
		disX = ev.clientX - oBox.offsetLeft;
		disY = ev.clientY - oBox.offsetTop;
		document.onmousemove = function(ev){
			oBox.style.left = ev.clientX - disX + "px";
			oBox.style.top = ev.clientY - disY + "px";
		}
		document.onmouseup = function(){
			document.onmouseup = null;
			document.onmousemove = null;
		}
	}

</script>
</html>